<template>
  <a-col :xs='24' :sm='24' :md='24' :lg='8' :xl='6'>
    <a-form-item :label='label' :extra='extra' v-if='visible'>
      <!--文本框-->
      <a-input v-if='types.includes(type)' ref='input' v-decorator='decorator' allowClear :type='type' :placeholder="'请输入'+getPlaceholder"></a-input>
      <!--下拉框-->
      <a-select v-if="type=='select'" v-decorator='decorator' :dropdownMatchSelectWidth='false' :showSearch='showSearch' :allowClear='allowClear' optionFilterProp='children' :placeholder="'--请选择'+label+'--'" @search='handleSearch' @change='valueChange'>
        <a-select-option value='' v-if='showAll' key=''>全部</a-select-option>
        <a-select-option :value='item[valueKey]' v-for='(item,index) in selectData' :key='index'>{{ item[labelKey] }}</a-select-option>
      </a-select>

      <!--级联选择-->
      <a-cascader v-if="type=='cascader'" v-decorator='decorator' :placeholder="'请选择'+label" :options='selectData' @change='onChange' changeOnSelect />

      <!--日期-->
      <a-date-picker v-if="type=='date'" v-decorator='decorator' :disabledDate='disabledDate' allowClear :placeholder="'请选择'+label" @change='dateChange'></a-date-picker>

      <!--月份-->
      <a-month-picker v-if="type=='month'" v-decorator='decorator' :placeholder="'请选择'+label" @change='monthChange'></a-month-picker>

      <!--日期范围-->
      <a-range-picker v-if="type=='range'" v-decorator='decorator' format='YYYY-MM-DD' @change='rangeDateChange' />
      <slot></slot>
    </a-form-item>
  </a-col>
</template>
<script>
import { listToTree2 } from "../utils/util"

export default {
  name: "fSearchFormItem",
  inject: ["queryParam"],
  props: {
    data: {
      type: [String, Array],
      required: false,
      default: null
    },
    visible: {
      type: Boolean,
      default: true
    },
    params: {
      type: Object,
      default: () => {
      }
    },
    /*是否自动加载数据*/
    autoLoad: {
      type: Boolean,
      default: true
    },
    showAll: {
      type: Boolean,
      default: true
    },
    extra: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    rangeConfig: {
      type: Object,
      default: () => {
        return {
          beginName: "beginDate",
          endName: "endDate"
        }
      }
    },
    name: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    value: {
      type: [Number, String, Array],
      required: false,
      default: ""
    },
    options: {
      type: String,
      required: false,
      default: ""
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    valueKey: {
      type: String,
      default: "value"
    },
    labelKey: {
      type: String,
      default: "label"
    },
    placeholder: {
      type: String,
      default: ""
    },
    /*0:不限制 1:限制只能选明天及之后的日期（今天不可选中）2:限制只能选今天及之后的日期（今天可选中）3:限制只能选昨天及之前的日期（今天不可选中）4:限制只能选今天及之前的日期（今天可选中）*/
    disabledDateType: {
      type: Number,
      default: 4
    },
    allowClear: {
      type: Boolean, // 是否显示清除按钮
      default: true
    },
    isDefaultValue: {
      type: Boolean, // 是否默认选中第一个值
      default: false
    }
  },
  data() {
    return {
      selectData: [],
      types: ["text", "textarea", "password"]
    }
  },
  computed: {
    decorator: function() {
      let obj = [this.name]
      let config = {}
      obj.push(config)
      return obj
    },
    getData: function() {
      return this.$moment().format()
    },
    getPlaceholder: function() {
      if (this.placeholder) {
        return this.placeholder
      }
      return this.label
    }
  },
  methods: {
    rangeDateChange(data1, data2) {
      this.queryParam[this.rangeConfig.beginName] = data2[0]
      this.queryParam[this.rangeConfig.endName] = data2[1]
      this.$emit("change", data2[0], data2[1])
    },
    valueChange(value) {
      console.log("changed", value)
      this.$emit("change", value)
      this.$emit("changeItem", {
        item: this.selectData.filter(item => {
          return item[this.valueKey] == value
        }),
        valueKey: this.valueKey
      })
    },
    handleSearch(value) {
      this.initData({
        keyword: value
      })
    },
    dateChange(data1, data2) {
      this.queryParam[this.name] = data2
      this.$emit("change", data2)

    },
    monthChange(data1, data2) {
      this.queryParam[this.name] = data2
    },
    onChange(value, opt) {
      console.log(value)
    },
    initData: function(params) {
      this.http.get(this, {
        url: this.data,
        params: params,
        success: function(me, data) {
          if (me.type == "cascader") {
            me.selectData = listToTree2(data, {
              primaryKey: "categoryId",
              titleKey: "categoryName"
            })
          } else {
            me.selectData = data
            if (me.isDefaultValue && data.length > 0) {
              me.$emit("onLoadList", {
                item: data[0],
                valueKey: me.valueKey
              })
            }
          }
        }
      })
    },
    disabledDate(current) {
      if (this.disabledDateType == 0) {
        return null
      }
      if (this.disabledDateType == 1) {
        return current && current < this.$moment().endOf("day")
      }
      if (this.disabledDateType == 2) {
        return current && current < this.$moment().subtract(1, "days").endOf("day")
      }
      if (this.disabledDateType == 3) {
        return current && current > this.$moment().subtract(1, "days").endOf("day")
      }
      if (this.disabledDateType == 4) {
        return current && current > this.$moment().endOf("day")
      }
    }
  },
  created() {
    if (this.options) {
      this.http.get(this, {
        url: this.options,
        data: {
          params: {}
        },
        success: function(me, data) {
          let obj = listToTree2(data, {
            primaryKey: "categoryId",
            titleKey: "categoryName"
          })
          me.selectData = obj
        }
      })
    }
    if (this.data) {
      if (typeof this.data == "object") {
        this.selectData = this.data
      }
      if (typeof this.data == "string") {
        this.initData(this.params)
      }
    }
  }
}
</script>
<style lang='less' scoped>
.popupClass {
  height: 500px;
}

/deep/ .ant-select-selection--single {
  width: 230px;
}
</style>
